<?php
	session_start();
	if(isset($_SESSION['logged'])){
		if(!$_SESSION['logged']){
			$_SESSION['mustLoggedIn'] = 1;
			header("Location:register.php");
			die();
		}
	}
?>
<!DOCTYPE HTML>
<html>

<head>
  <title>Iran Game Center </title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <!-- stylesheets -->
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/light.css" rel="stylesheet" type="text/css" />
  <link href="css/chatstyle.css" rel="stylesheet" type="text/css" />
  
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="chat.js"></script>
	<?php $chatUser = $_SESSION['username']; ?>
    <script type="text/javascript">
    
        // ask user for name with popup prompt   
		
        var name = '<?php echo $chatUser; ?>';
		
		
		if (!name || name === ' ') {
    	   name = "Guest";	
    	}
		
		
		// strip tags
    	name = name.replace(/(<([^>]+)>)/ig,"");
            	
    	
    	// display name on page
    	$("#name-area").html("You are: <span>" + name + "</span>");
    	
    	// kick off chat
        var chat =  new Chat();
    	$(function() {
    	
    		 chat.getState(); 
    		 
    		 // watch textarea for key presses
             $("#sendie").keydown(function(event) {  
             
                 var key = event.which;  
           
                 //all keys including return.  
                 if (key >= 33) {
                   
                     var maxLength = $(this).attr("maxlength");  
                     var length = this.value.length;  
                     
                     // don't allow new content if length is maxed out
                     if (length >= maxLength) {  
                         event.preventDefault();  
                     }  
                  }  
    		 																																																});
    		 // watch textarea for release of key press
    		 $('#sendie').keyup(function(e) {	
    		 					 
    			  if (e.keyCode == 13) { 
    			  
                    var text = $(this).val();
    				var maxLength = $(this).attr("maxlength");  
                    var length = text.length; 
                     
                    // send 
                    if (length <= maxLength + 1) { 
                     
    			        chat.send(text, name);	
    			        $(this).val("");
    			        
                    } else {
                    
    					$(this).val(text.substring(0, maxLength));
    					
    				}	
    				
    				
    			  }
             });
            
    	});
    </script>
  
</head>

 <body onload="javascript: paintBoard();setInterval('chat.update()', 1000);">  <div id="main">

    <!-- begin header -->
    <header>
      
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.php">خانه</a></li>          
        </ul>
      </nav>
	  <div id="logo"><h1>مرکز بازی های <a href="#">آنلاین</a>ایران</h1></div>
    </header>
    <!-- end header -->

    <!-- begin content -->
    <div id="site_content">
      <div id="left_content">
            
			<div id="page-wrap">
    
        <h2>گفتگوی بازیکنان</h2>
        <p id="name-area"></p>
        
        <div id="chat-wrap"><div id="chat-area"></div></div>
		<center>
        
        <form id="send-message-area">
            <p>پیام شما </p>
            <textarea id="sendie" maxlength = '100' ></textarea>
        </form>
    
    </div>
        </center>
      </div>
      <div id="right_content">
        <canvas width="430" height ="490" id="board" onclick="javascript: clickHandler(event);"></canvas>
      </div>
    </div>
    <!-- end content -->

  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
  <script type="text/javascript" src="js/jquery.sooperfish.js"></script>
  <!-- initialise sooperfish menu -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
  </script>
  <script>
  
var path = 0;
var xBoard = 0;
var oBoard = 0;
var context;
var width, height;
var playerXO = 'X';

function paintBoard() {
   var board = document.getElementById('board');
  
   width = board.width;
   height = board.height;
   context = board.getContext('2d');

   context.beginPath();
   context.strokeStyle = '#000'; 
   context.lineWidth   = 4;

   context.moveTo((width / 3), 0);
   context.lineTo((width / 3), height);

   context.moveTo((width / 3) * 2, 0);
   context.lineTo((width / 3) * 2, height);

   context.moveTo(0, (height / 3));
   context.lineTo(width, (height / 3));

   context.moveTo(0, (height / 3) * 2);
   context.lineTo(width, (height / 3) * 2);

   context.stroke();
   context.closePath();
	  
}

function checkWinner(board) {

   var result = false;

   if (((board | 0x1C0) == board) || ((board | 0x38 ) == board) || 
	((board | 0x7) == board) || ((board | 0x124) == board) || 
	((board | 0x92) == board) || ((board | 0x49) == board) || 
	((board | 0x111) == board) || ((board | 0x54) == board)) {  

	result = true;
   } 
   return result;
}

function paintX(x, y) {

   context.beginPath();

   context.strokeStyle = '#ff0000'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.moveTo(beginX, beginY);
   context.lineTo(endX, endY); 

   context.moveTo(beginX, endY);
   context.lineTo(endX, beginY); 	

   context.stroke();
   context.closePath(); 
}

function paintO(x, y) {
	
   context.beginPath();

   context.strokeStyle = '#0000ff'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.arc(beginX + ((endX - beginX) / 2), beginY + ((endY - beginY) / 2), (endX - beginX) / 2 , 0, Math.PI * 2, true);

   context.stroke();
   context.closePath();
}

function clickHandler(e) {

    var y = Math.floor((e.clientY-130) / (height / 3));
    var x =  Math.floor((e.clientX-655) / (width/ 3)); 
	

    var bit =  (1 << x + ( y * 3 ));

    if (isEmpty(xBoard, oBoard, bit)) {
		path = (y*3+x+1);
		markBit(bit, playerXO);
		$.ajax({
			   type: "POST",
			  cache : false,
			   url: "gameProcess.php",
			   data: {
						'ID' : path
						},
			   dataType: "json",
			
			   success: function(){
					
			   },
		});
		if (playerXO == 'X'){
			playerXO = 'O';
		}else{
			playerXO = 'X';
		}

        if (!checkNobody())  {
		if (checkWinner(xBoard)) {

		    alert('here X win!!');
		    restart();

		} 
		if (!checkNobody()) {
		     
		       if (checkWinner(oBoard)) {
			   alert('here O win!!');
			   restart();
		       }
		}
	 	
	    }	
    }
}

function checkNobody(){
   if ((xBoard | oBoard) == 0x1FF) {
		if(checkWinner(xBoard)){
			alert('checknobody X win');
			return true;
		}
		else if(checkWinner(oBoard)){
			alert('checknobody O win');
			return true;
			
		}else{
       alert('Nobody won!!');
       restart();
       return true;
	   }
   }
   return false;
}

function restart() {
 window.location.href = "http://localhost/irgc1/demo//play.php?gameType='tictactoe'"+path; 

   context.clearRect (0, 0, width , height);
   xBoard = 0;
   oBoard = 0;
   paintBoard();
}

function isEmpty(xBoard, oBoard, bit) {
   return (((xBoard & bit) == 0) && ((oBoard & bit) == 0));
}



function markBit(markBit, player) {
   
   var bit = 1;
   var posX = 0, posY = 0;
   
   while ((markBit & bit) == 0) {
	bit = bit << 1;
        posX++;
	if (posX > 2) {
            posX = 0;
            posY++;
        }
   }
   
    if (player == 'O') { 
        oBoard = oBoard | bit;
	paintO(posX, posY);
    } else {
        xBoard = xBoard | bit;
	paintX(posX, posY);
    }
}


</script>
</body>
</html>